<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>老人专用链接墙</title>
    <style>
        body {
            font-family: "微软雅黑", Arial;
            margin: 0;
            padding: 20px;
            background: #f0f8ff;
            min-height: 100vh;
        }

        #add-button {
            position: fixed;
            top: 20px;
            right: 20px;
            font-size: 50px;
            cursor: pointer;
            background: #28a745;
            color: white;
            border: none;
            border-radius: 50%;
            width: 70px;
            height: 70px;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 10px rgba(40,167,69,0.5);
            z-index: 1000;
        }

        #dialog {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: white;
            padding: 30px;
            border-radius: 20px;
            box-shadow: 0 0 30px rgba(0,0,0,0.2);
            width: 400px;
            z-index: 9999;
        }

        #dialog input {
            display: block;
            margin: 15px 0;
            padding: 15px;
            width: 100%;
            font-size: 20px;
            border: 3px solid #007bff;
            border-radius: 10px;
        }

        #dialog button {
            width: 100%;
            padding: 15px;
            font-size: 24px;
            background: #28a745;
            color: white;
            border: none;
            border-radius: 10px;
            cursor: pointer;
            margin-top: 10px;
        }

        #container {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            max-width: 1200px;
            margin: 100px auto;
            padding: 20px;
        }

        .square {
            width: 200px;
            height: 200px;
            background: linear-gradient(135deg, #007bff, #0056b3);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 28px;
            text-align: center;
            cursor: move;
            border-radius: 20px;
            text-decoration: none;
            transition: transform 0.3s;
            padding: 15px;
            box-shadow: 0 5px 15px rgba(0,123,255,0.3);
            user-select: none;
            position: relative;
        }

        .square.dragging {
            opacity: 0.5;
            transform: scale(0.95);
        }

        .square.over {
            border: 3px dashed #ffd700;
        }

        .delete-btn {
            position: absolute;
            top: 10px;
            right: 10px;
            background: #ff4444;
            color: white;
            border: none;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            cursor: pointer;
            font-size: 24px;
            line-height: 40px;
            opacity: 0.9;
            transition: 0.3s;
            display: none;
        }

        .square:hover .delete-btn {
            display: block;
        }

        .delete-btn:hover {
            opacity: 1;
            transform: scale(1.1);
        }
    </style>
</head>
<body>
    <button id="add-button">+</button>

    <div id="dialog">
        <input type="text" id="link-url" placeholder="输入地址（示例：http://百度.com 或 D:/照片）">
        <input type="text" id="link-name" placeholder="输入名称（示例：百度搜索）">
        <button id="save-button">保存</button>
    </div>

    <div id="container"></div>

    <script>
        const STORAGE_KEY = 'elderLinks';
        const container = document.getElementById('container');
        let dragElement = null;
        let startIndex = -1;

        // 加载保存的链接
        function loadLinks() {
            container.innerHTML = '';
            const links = JSON.parse(localStorage.getItem(STORAGE_KEY) || []);
            links.forEach((link, index) => {
                createSquareElement(link, index);
            });
        }

        // 创建方块元素
        function createSquareElement(link, index) {
            const square = document.createElement('a');
            square.className = 'square';
            square.dataset.index = index;
            
            // 处理链接
            let finalUrl = link.url;
            if(!finalUrl.startsWith('http://') && 
               !finalUrl.startsWith('https://') && 
               !finalUrl.startsWith('file://')) {
                finalUrl = 'file:///' + finalUrl.replace(/\\/g, '/');
            }
            
            square.href = finalUrl;
            square.target = '_blank';
            square.innerHTML = `
                ${link.name}
                <button class="delete-btn">×</button>
            `;

            // 删除功能
            square.querySelector('.delete-btn').addEventListener('click', (e) => {
                e.preventDefault();
                if(confirm('确定要删除吗？')) {
                    const links = JSON.parse(localStorage.getItem(STORAGE_KEY) || []);
                    const newLinks = links.filter(item => item.id !== link.id);
                    localStorage.setItem(STORAGE_KEY, JSON.stringify(newLinks));
                    loadLinks();
                }
            });

            // 右键编辑功能
            square.addEventListener('contextmenu', (e) => {
                e.preventDefault();
                if(confirm('要编辑这个链接吗？')) {
                    openEditDialog(link);
                }
            });

            // 拖动功能
            square.draggable = true;
            square.addEventListener('dragstart', handleDragStart);
            square.addEventListener('dragover', handleDragOver);
            square.addEventListener('dragend', handleDragEnd);
            square.addEventListener('dragleave', handleDragLeave);

            container.appendChild(square);
        }

        // 拖动处理函数
        function handleDragStart(e) {
            dragElement = this;
            startIndex = +this.dataset.index;
            this.classList.add('dragging');
            e.dataTransfer.effectAllowed = 'move';
        }

        function handleDragOver(e) {
            e.preventDefault();
            const afterElement = getDragAfterElement(container, e.clientY);
            const currentElement = this;
            
            if(afterElement == null) {
                container.appendChild(dragElement);
            } else {
                container.insertBefore(dragElement, afterElement);
            }
            
            currentElement.classList.add('over');
        }

        function handleDragLeave() {
            this.classList.remove('over');
        }

        function handleDragEnd() {
            this.classList.remove('dragging');
            
            // 更新存储顺序
            const links = JSON.parse(localStorage.getItem(STORAGE_KEY) || []);
            const draggedItem = links.splice(startIndex, 1)[0];
            const newIndex = Array.from(container.children).indexOf(this);
            links.splice(newIndex, 0, draggedItem);
            localStorage.setItem(STORAGE_KEY, JSON.stringify(links));
            
            // 更新所有元素的data-index
            Array.from(container.children).forEach((child, index) => {
                child.dataset.index = index;
            });
            
            document.querySelectorAll('.square.over').forEach(el => {
                el.classList.remove('over');
            });
        }

        function getDragAfterElement(container, y) {
            const draggableElements = [...container.querySelectorAll('.square:not(.dragging)')];
            
            return draggableElements.reduce((closest, child) => {
                const box = child.getBoundingClientRect();
                const offset = y - box.top - box.height / 2;
                
                if(offset < 0 && offset > closest.offset) {
                    return { offset: offset, element: child };
                } else {
                    return closest;
                }
            }, { offset: Number.NEGATIVE_INFINITY }).element;
        }

        // 打开编辑对话框
        function openEditDialog(link) {
            const dialog = document.getElementById('dialog');
            dialog.dataset.editId = link.id;
            document.getElementById('link-url').value = link.url.replace('file:///', '');
            document.getElementById('link-name').value = link.name;
            dialog.style.display = 'block';
        }

        // 保存功能
        document.getElementById('save-button').addEventListener('click', () => {
            const urlInput = document.getElementById('link-url');
            const nameInput = document.getElementById('link-name');
            let url = urlInput.value.trim();
            const name = nameInput.value.trim();

            // 自动补全协议
            if (url) {
                if (!url.startsWith('http://') && 
                    !url.startsWith('https://') && 
                    !url.startsWith('file://')) {
                    
                    if (/^[a-zA-Z]:\\/.test(url) || url.startsWith('/')) {
                        url = url.replace(/\\/g, '/');
                        if (!url.startsWith('file:///')) {
                            url = 'file:///' + url;
                        }
                    } else {
                        url = 'http://' + url;
                    }
                }
            }

            if (url && name) {
                const links = JSON.parse(localStorage.getItem(STORAGE_KEY) || []);
                const editId = document.getElementById('dialog').dataset.editId;
                
                if(editId) {
                    // 修改模式
                    const index = links.findIndex(l => l.id == editId);
                    links[index] = {
                        ...links[index],
                        url: url,
                        name: name
                    };
                    delete document.getElementById('dialog').dataset.editId;
                } else {
                    // 新增模式
                    links.push({
                        id: Date.now(),
                        url: url,
                        name: name
                    });
                }
                
                localStorage.setItem(STORAGE_KEY, JSON.stringify(links));
                loadLinks();
                document.getElementById('dialog').style.display = 'none';
                urlInput.value = '';
                nameInput.value = '';
            }
        });

        // 点击对话框背景关闭
        document.getElementById('dialog').addEventListener('click', function(e) {
            if(e.target === this) {
                this.style.display = 'none';
            }
        });

        // 初始化
        document.getElementById('add-button').addEventListener('click', () => {
            document.getElementById('dialog').style.display = 'block';
            document.getElementById('dialog').dataset.editId = '';
            document.getElementById('link-url').value = '';
            document.getElementById('link-name').value = '';
        });

        // 页面加载时初始化
        loadLinks();
    </script>
</body>
</html>